<!DOCTYPE html>
<html lang="en">
    <head>
        <title>购物车实例</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="base.css">
        <style>
            .container{
                margin: 0 auto;
                max-width: 1280px;
            }
            .cart{
                padding:69px 0 54px 0;
            }
            .header{
                text-align: center;
                position: relative;
                margin-bottom: 40px;
            }
            .header::before{
                top: 15px;
                left: 0;
                content: "";
                width: 100%;
                height: 1px;
                background: #ccc;
                z-index: 0;
                position:absolute;
            }
            .header span{
                background: white;
                font-size: 20px;
                font-weight: bold;
                z-index: 1;
                color: #605f5f;
                position: relative; 
                padding: 0 1em;
            }
            .cart-item{
                display: table;
                width: 100%;
            }
            .cart-item-header{
                display: table-header-group;
                width: 100%;
                color: white;
            }
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                width: 100%;
                display: table-row;
            }
            .cart-item-header ul>li{
                margin-left: 10em;
                line-height: 54px;
                height: 54px;
                font-size: 18px;
                text-align: center;
                display: table-cell;
                background: #605f5f;
            }
            ul>li:nth-child(2),
            ul>li:nth-child(3),
            ul>li:nth-child(4),
            ul>li:nth-child(5)
            /*li>div:nth-child(2),
            li>div:nth-child(3),
            li>div:nth-child(4),
            li>div:nth-child(5)*/
            {
                width: 12%;
                padding: 0 10px;
            }
            .cart-item-list{
                display: table-row-group;
            }
            .cart-item-list li{
                position: relative;
                display: table-row;
                padding: 36px 0;
                width: 100%;
            }
            .cart-item-list li>div{
                position: relative;
                display: table-cell;
                text-align: center;
                vertical-align: top;
                border-bottom: 1px solid #e9e9e9;
            }
            .cart-item-list .cart-cell-1{
                min-height:72px;
                padding: 36px 0;
                text-align: left;
                border-left: 1px solid #e9e9e9;
                font-size: 14px;
            }
            .cart-item-list .cart-cell-1>.check{
                float: left;
                padding: 28px 0 28px 22px;
            }
            .cart-item-list .cart-cell-1>.check>.checkbox{
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #ccc;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
            }
            .cart-item-list .cart-cell-1>.image{
                float: left;
                width: 100px;
                height: 72px;
                margin-left: 22px;
                
            }
            .cart-item-list .cart-cell-1>.image>img{
                width: 100%;
                cursor: pointer;
                border: 1px solid #e9e9e9;
            }
           .cart-item-list .cart-cell-1>.name{
                min-height: 58px;
                padding: 0 20px 0 160px;
            }
            .cart-item-list .cart-cell-1>.name>div{
                margin: 12px 10px 10px 20px;
                line-height: 16px;
                color: #000;
            }
             .cart-item-list .cart-cell-1>.summary{
                position: relative;
                padding-left: 180px;
            }
             .cart-item-list .cart-cell-1>.summary dl{
               padding-right: 60px;
            }
              .cart-item-list .cart-cell-1>.summary dt{
                float: left;
                width: 65px;
            }
            .cart-item-list .cart-cell-1>.summary dd{
                margin-bottom: 13px;
                margin-left: 55px;
                color: #999;
                width: 100%;
            }
            .cart-item-list .cart-cell-1>.summary dl::after{
                visibility: hidden;
                display: block;
                content: " ";
                clear: both;
            }
             .cart-item-list .cart-cell-3{
                padding-top: 52px;
            }
            .cart-item-list .cart-cell-3 .quantity>a{
                font-size: 25px;
            }
             .cart-item-list .cart-cell-3 .quantity>input[type="text"]{
                text-align: center;
            }
            .cart-item-list .cart-cell-2,
            .cart-item-list .cart-cell-4,
            .cart-item-list .cart-cell-5{
                padding-top:64px;
            }
            .cart-item-list .cart-cell-5{
                border-right: 1px solid #e9e9e9;
            }
        </style>
    </head>
    <body class="container">
        <div id="app">
            <div class="container">
                <div class="cart">
                    <div class="header">
                        <span>购物车</span>
                    </div>
                    <div class="item-list-wrap">
                        <div class="cart-item">
                            <div class="cart-item-header">
                                <ul>
                                    <li>商品</li>
                                    <li>价格</li>
                                    <li>数量</li>
                                    <li>总金额</li>
                                    <li>编辑</li>
                                </ul>
                            </div>
                            <ul class="cart-item-list">
                                <li>
                                    <div class="cart-cell-1">
                                        <div class="check">
                                            <input type="checkbox" class="checkbox">
                                            <!--<a href="javascript:void(0)" class="checkbox"></a>-->
                                        </div>
                                        <div class="image">
                                            <img src="img/mg.jpg" alt="">
                                        </div>
                                        <div class="name">
                                            <div>芒果</div>
                                        </div>
                                        <div class="summary">
                                            <dl>
                                                <dt>
                                                    赠品：
                                                </dt>
                                                <dd>
                                                    水果刀1
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                    <div class="cart-cell-2">
                                        <div class="price">￥20</div>
                                    </div>
                                    <div class="cart-cell-3">
                                        <div class="quantity">
                                            <a href="javascript:void(0)">-</a>
                                            <input type="text" value="1" disabled/>
                                            <a href="javascript:void(0)">+</a>
                                        </div>
                                        
                                    </div>
                                    <div class="cart-cell-4">
                                        <div class="total">
                                            ￥20
                                        </div>
                                    </div>
                                    <div class="cart-cell-5">
                                        <button type="button">删除</button>
                                    </div>
                                </li>
                            </ul>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>